<template>
  <div class="dice-container">
    <h1>骰子插件</h1>
    <div class="content">
      <dice-control 
        @roll="handleRoll" 
        @dice-count-change="handleDiceCountChange"
      />
      <div class="dice-area">
        <div v-for="(dice, index) in dices" 
             :key="index"
             class="dice-wrapper">
          <dice 
            :ref="el => diceRefs[index] = el"
            :value="diceValues[index]"
          />
        </div>
      </div>
      <div class="total-value" v-if="!isRolling && showResult">
        点数：{{ getDiceExpression }}
      </div>
      <history ref="historyRef" />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import Dice from './components/Dice.vue'
import DiceControl from './components/DiceControl.vue'
import History from './components/History.vue'

const dices = ref([1])
const diceRefs = ref([])
const diceValues = ref([1])
const historyRef = ref(null)
const isRolling = ref(false)
const showResult = ref(false)

const getDiceExpression = computed(() => {
  if (diceValues.value.length === 1) {
    return `${diceValues.value[0]}`
  }
  const sum = diceValues.value.reduce((acc, curr) => acc + curr, 0)
  return `${diceValues.value.join(' + ')} = ${sum}`
})

const handleRoll = () => {
  isRolling.value = true
  showResult.value = false
  
  const results = []
  diceRefs.value.forEach((dice, index) => {
    const value = Math.floor(Math.random() * 6) + 1
    results.push(value)
    dice.roll()
  })
  
  setTimeout(() => {
    diceValues.value = results
    isRolling.value = false
    showResult.value = true
    historyRef.value.addRecord(results)
  }, 1000)
}

const handleDiceCountChange = (count) => {
  dices.value = new Array(count).fill(1)
  diceValues.value = new Array(count).fill(1)
  diceRefs.value = []
  showResult.value = false
}

const handleKeyPress = (e) => {
  if (e.code === 'Space') {
    handleRoll()
  }
}

onMounted(() => {
  window.addEventListener('keypress', handleKeyPress)
})

onUnmounted(() => {
  window.removeEventListener('keypress', handleKeyPress)
})
</script>

<style lang="scss" scoped>
.dice-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 10px;
  text-align: center;

  h1 {
    color: #409EFF;
    margin-bottom: 15px;
    font-size: 24px;
  }

  .content {
    min-height: 380px;
    background: #f5f7fa;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .dice-area {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin: 15px 0;
    
    .dice-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }

  .total-value {
    margin: 15px auto;
    font-size: 18px;
    font-weight: 500;
    color: #303133;
    background: #fff;
    padding: 8px 20px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: inline-block;
    opacity: 0;
    animation: fadeIn 0.3s ease-in forwards;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style> 